/**
 * Created by Administrator on 2017/10/10.
 */
import React from "react";
import { routerRedux } from 'dva/router';
import {Icon,Tabs,NoticeBar,Button} from "antd-mobile";


const TabPane = Tabs.TabPane;

class particulars extends React.Component{
  constructor(props) {
    super(props);
    this.state = {

    };
  }

  callback = (key) =>{
    console.log('callback', key);
  };

  handleTabClick = (key) =>{
    console.log('callback', key);
  };
  render(){
    const arr = ['党的地位和作用','党的性质和宗旨','党的指导思想','党的纲领','中共特色社会主义','党的领导','申请入党条件',
      '党的地位和作用','党的性质和宗旨','党的指导思想','党的纲领','中共特色社会主义','党的领导','申请入党条件',];

    return(
      <div className="course"  style={{backgroundColor:"white"}}>
        <NoticeBar mode="closable" icon={null}>在WiFi环境下自动保存视频至本地</NoticeBar>
        <div style={{width:'100%',height:'4rem'}}> </div>
        <Tabs defaultActiveKey="1" swipeable={false} onChange={this.callback} onTabClick={this.handleTabClick}>
          <TabPane tab={<div>课程详情</div>} key="1">
            <div style={{alignItems: 'center', justifyContent: 'center', height: '6rem', backgroundColor: '#fff' ,padding:'0rem 0.3rem'}}>
              <h3>中国特色社会主义事业总体布局</h3>
              <div style={{marginBottom:'0.3rem'}}>
                <div style={{display:'inline-block',marginRight:'0.3rem'}}>1324次学习</div>
                <div style={{display:'inline-block'}}>共产党员网发布</div>
              </div>
              <div style={{lineHeight:'1.5',letterSpacing:'0.02rem',overflow:'auto',height:'4.2rem'}}>
                万维网联盟创建于1994年，是Web技术领域最具权威和影响力的国际中立性技术标准机构。到目前为止，W3C已发布了200多项影响深远的Web技术标准及实施指南，如广为业界采用的超文本标记语言（标准通用标记语言下的一个应用）、可扩展标记语言（标准通用标记语言下的一个子集）以及帮助残障人士有效获得Web内容的信息无障碍指南（WCAG）等，
                万维网联盟创建于1994年，是Web技术领域最具权威和影响力的国际中立性技术标准机构。到目前为止，W3C已发布了200多项影响深远的Web技术标准及实施指南，如广为业界采用的超文本标记语言（标准通用标记语言下的一个应用）、可扩展标记语言（标准通用标记语言下的一个子集）以及帮助残障人士有效获得Web内容的信息无障碍指南（WCAG）等，
              </div>
            </div>
            <Button className="btn" style={{backgroundColor:"#ff0000",color:'white',border:'1px solid #ff0000',width:'80%',marginTop:"0.2rem",margin:"0 auto"}} type="primary">收藏</Button>
          </TabPane>
          <TabPane tab={<div>课程选择</div>} key="2">
            <div style={{ display: 'flex', flexWrap:'wrap',justifyContent: 'center',height:'8rem',overflow:'auto',backgroundColor: '#fff' }}>
              {
                arr.map((i,key)=>{
                  return(
                    <div style={{ display: 'flex',width:'100%',height:'1rem',lineHeight:'1rem'}}>
                      <div className="text">{key+1}</div>
                      <div className="text">第{key+1}集：</div>
                      <div className="text">{i}</div>
                    </div>
                  )
                })
              }
            </div>
          </TabPane>
        </Tabs>
      </div>
    )
  }
}

export default particulars;
